<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>学院计划</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" th:href="@{css/materialdesignicons.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/animate.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/style.min.css}">
  <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" media="all">
</head>

<body>
<script id="barCar" type="text/html">
  <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>

<script id="toolbarMenu" type="text/html">
  <div class="layui-btn-container"  >
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="check" >启用</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="block" >禁用</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dels" >删除</button>
  </div>
</script>
<div th:include="comm/comm.html"></div>
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid p-t-15">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar d-flex flex-column flex-md-row">
                <form class="search-bar ml-md-auto">
                  <input type="hidden" name="search_field" id="search-field" value="title" />
                  <div class="input-group ml-md-auto">
                    <div class="input-group-prepend">
                      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="search-btn">标题</button>
                      <div class="dropdown-menu" style="">
                        <a class="dropdown-item" href="#!" data-field="title">标题</a>
                        <a class="dropdown-item" href="#!" data-field="cat_name">栏目</a>
                      </div>
                    </div>
                    <input type="text" class="form-control" name="keyword" placeholder="请输入名称">
                  </div>
                </form>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table id="demo" lay-filter="test" ></table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="display: none;padding: 20px" id="saveOrUpdateDiv">
        <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
          <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-row layui-col-space10">
              <div class="layui-col-md9 layui-col-xs7">
                <div class="layui-form-item magt3" hidden>
                  <label class="layui-form-label" >id:</label>
                  <div class="layui-input-block"  hidden style="padding: 5px">
                    <input type="text" readonly name="bid" class="layui-input"  placeholder="id" >
                  </div>
                </div>
                <div class="layui-form-item magt3">
                  <label class="layui-form-label">栏目:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <select name="type" class="form-control" id="type">
                      <option value="3">计划</option>
                      <option value="4">记录</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">标题:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="title" autocomplete="off" class="layui-input"
                           placeholder="标题" style="height: 30px;border-radius: 10px">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">书名:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="bookname" autocomplete="off" class="layui-input"
                           placeholder="书名" style="height: 30px;border-radius: 10px">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">作者:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="author" autocomplete="off" class="layui-input"
                           placeholder="作者" style="height: 30px;border-radius: 10px">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">关键字:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="keyword" autocomplete="off" class="layui-input"
                           placeholder="关键字" style="height: 30px;border-radius: 10px">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">描述:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="describe" autocomplete="off" class="layui-input"
                           placeholder="描述" style="height: 30px;border-radius: 10px">
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">状态:</label>
                  <div class="layui-input-block" style="padding: 5px">
                    <input type="radio" name="customRadioInline" value="1"checked="checked" title="可用">
                    <input type="radio" name="customRadioInline" value="0"  title="不可用">
                  </div>
                </div>
              </div>
              <div class="layui-form-item magb0">
                <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                  <button type="button"
                          class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                          lay-filter="doSubmit" lay-submit>提交
                  </button>
                  <button type="reset"
                          class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/lyear-loading.js"></script>
<script type="text/javascript" src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['layer','jquery','table','form'], function(){
        var layer = layui.layer,
            table = layui.table;
        form = layui.form;
        $ = layui.jquery,
            table.render({
                elem: '#demo'
                ,id: "user"
                ,cellMinWidth: 80
                ,url: 'seleall' //数据接口
                ,cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        ,{field: 'bid', title: 'id', width:60}
                        ,{field: 'type', title: '栏目', width:60,templet:function (data) {
                             if (data.type=="3"){
                                return "计划"
                            } if (data.type=="4"){
                                return "记录"
                            }
                        }}
                        ,{field: 'title', title: '标题', width:110}
                        ,{field: 'bookname', title: '书籍名', width:110}
                        ,{field: 'author', title: '作者', width:110}
                        ,{field: 'keyword', title: '关键字', width:110}
                        ,{field: 'describe', title: '详情', width:150}
                        ,{field: 'customRadioInline', title: '状态', width:90, templet:function (data) {
                           return data.customRadioInline=="1"?"正常":"不正常";
                        }}
                        ,{fixed: 'right', title:'操作', toolbar: '#barCar', width:190}]
                ]
                ,page: true
                ,limit:5
                ,toolbar: '#toolbarMenu'
            });


        function check(bids){
            $.post("upcheck",{"bids":bids },function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 刷新table
                    table.reload('user',{
                        page:{curr:1}
                    })
                });
            })
        }
        function  block(bids){
            $.post("upcheck1",{"bids":bids },function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 刷新table
                    table.reload('user',{
                        page:{curr:1}
                    })
                });
            })
        }
        function dels(bids){
            $.post("delss",{"bids":bids },function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 刷新table
                    table.reload('user',{
                        page:{curr:1}
                    })
                });
            })
        }


        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            var bids = [],index = 0;
            data.forEach(function (c) {
                bids[index++] = c.bid;
            })
            if(obj.event === 'check'){
                layer.confirm('真的全部启用吗？', function(index){
                    check(bids);
                    layer.close(index);
                });
            } else if(obj.event === 'block'){
                layer.confirm('真的全部禁用吗？', function(index){
                    block(bids);
                    layer.close(index);
                });
            }else if (obj.event==='dels') {
                layer.confirm('真的删除吗？', function(index){
                    dels(bids);
                    layer.close(index);
                });

            }

        });

        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    del(data.bid);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                edit(data)
            };
        })
        form.on("submit(doSubmit)",function (data) {
            $.post(url,data.field,function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 关闭当前弹出框
                    layer.close(openIndex)
                    table.reload("user",{
                        page:{
                            curr:1
                        }
                    })
                });
            })

            return false;
        })
        function del(bid) {
            $.post("deletebookonle",{"bid":bid },function (d) {
                layer.msg(d.msg, {
                    offset: '15px'
                    ,icon: 1
                    ,time: 1000
                }, function(){
                    // 刷新table
                    table.reload('user',{
                        page:{curr:1}
                    })
                });
            })
        }
        function edit(data) {
            openIndex = layer.open({
                type:1
                ,content: $('#saveOrUpdateDiv')
                ,title:"菜单修改"
                ,area:['800px', '450px']
                , offset: '10px'
                ,success:function () {
                    form.val('dataFrm',data)
                    $('[name="bid"]').val(data.bid)
                    form.render()
                    url = "updatebookonle"
                }
            })
        }

    });
</script>
</body>
</html>